<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto"
		:size="formSize" status-icon>
		<el-form-item label="节点编号" prop="NodeCode">
			<el-input v-model="ruleForm.NodeCode" />
		</el-form-item>
		<el-form-item label="节点类型名" prop="TypeCode">
            <el-select v-model="ruleForm.TypeCode" placeholder="请选择节点">
                <el-option v-for="menu in typelist" :label="menu.TypeName" :value="menu.TypeCode"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="角色名" prop="RoleName">
			<el-select v-model="ruleForm.RoleId" placeholder="请选择角色">
	    			<el-option v-for="menu in menulist" :label="menu.RoleName" :value="menu.RoleValue"></el-option>
	    		</el-select>
		</el-form-item>
        <el-form-item label="IsUseDept" prop="IsUseDept">
			<el-input v-model="ruleForm.IsUseDept" />
		</el-form-item>
        <el-form-item label="上一审批节点" prop="PrevNodeCode">
			<el-input v-model="ruleForm.PrevNodeCode" />
		</el-form-item>
        <el-form-item label="下一审批节点" prop="NextNodeCode">
			<el-input v-model="ruleForm.NextNodeCode" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>

</template>
<script lang="ts" setup>
	import { reactive, ref, onMounted } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { ElNotification } from 'element-plus'
	import nodeapi from "../../api/wf_nodeapi"
    import roleapi from "../../api/roleinfoapi"
	import nodetype from  '../../api/wf_approvalflowapi'
	
    const menulist =ref<any>([])
	const props = defineProps({
		Id: Number,
	});
	const emit = defineEmits(['onSave'])

	interface RuleForm {
		NodeCode : string
		TypeCode : string|null
		NodeName : string
        RoleId :number|null
        IsUseDept:number
        PrevNodeCode:string
        NextNodeCode:string
	}
    const getrole = ()=>{
        roleapi.Query({}).then((res:any)=>{
            menulist.value = res.data
            console.log("rs",menulist.value)
        })
    }
	const typelist = ref<any>([])
    const gettype = () => {
    nodetype.getAll().then((res: any) => {
        typelist.value = res.data
        console.log("rs", typelist.value)
    })
}
	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
        const ruleForm = ref<RuleForm>({
		NodeCode: '',
		TypeCode: null,
        NodeName:'',
		RoleId: null,
        IsUseDept:1,
        PrevNodeCode:'',
        NextNodeCode:''
	})

	const getData = () => {
		nodeapi.get(props.Id).then(res => {
			console.log("aaa=", res.data);
			ruleForm.value = res.data
		})
	}
	onMounted(() => {
		getData();
        getrole()
		gettype()
	})
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				console.log("ruleForm.data", ruleForm.value)

				nodeapi.put(ruleForm.value).then((res:any) => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '修改成功',
							type: 'success',
							duration: 800,
							onClose: () => {
								emit("onSave", true)
							}
						})
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>

<style>
</style>